import {PageHeaderWrapper} from '@ant-design/pro-layout';
import React from 'react';
import {Card, Col, DatePicker, Row, Spin} from 'antd';
import styles from './index.less';
import {connect} from "dva";

import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import AutoScore from "@/pages/GaoLu/components/AutoScore";
import CoreData from "@/pages/GaoLu/components/CoreData";
import ScoreTrend from "@/pages/GaoLu/components/ScoreTrend";
import {trigger} from "@/utils/utils";
import time, {currentTime, dateFormat, getMockTime} from "@/utils/time";
import {eventTrigger} from "@/utils/resize";
import LoseScore from "@/pages/GaoLuDiagnose/components/Main/LoseScore";
import LoseItem from "@/pages/GaoLuDiagnose/components/Main/LoseItem";
import LoseItemRate from "@/pages/GaoLuDiagnose/components/Main/LoseItemRate";
import LoseCountDetail from "@/pages/GaoLuDiagnose/components/Main/LoseCountDetail";
import moment from "moment";
import Common from "@/pages/common";
import CommonTable from "@/pages/commonTable";


class Main extends React.Component {

  extra = {count: 1};

  autoScoreReq = 0;

  onceReq = 0;

  stopLoop = false;

  showFlag = {
    showAutoScore: false
  };

  globalTime = {
    startOfDay: time.getStartOfDay(),
    endOfDay: time.getEndOfDay(),
    currentTime: time.getStartOfDay()
  };

  state = {
    current:time.getStartOfDay()
  }

  timePick = value => {
    this.state.current = value.toDate();
    this.getItemScore();
  };

  getItemScore = () => {
    this.props.dispatch({
      type: 'gaoluDiagnose/getItemScore',
      payload: {
        end: dateFormat(this.state.current),
      }
    });
  };


  async componentDidMount() {
    const {dispatch} = this.props;
    const payload =await getMockTime("GaoLu")
    let current = payload.current

    this.setState({current})

    this.onceReq = requestAnimationFrame(() => dispatch({
      type: 'gaolu/autoScore', payload: {
        end: dateFormat(current)
      }
    }));
    this.autoScoreReq = requestAnimationFrame(() =>
      trigger(
        async () => {
          const {count} = this.extra;

          const payload =await getMockTime(" const payload =await getMockTime(\"GaoLu\")")

          current = payload.current
          dispatch({
            type: 'gaolu/getScoreTrendEffect',
            payload: {
              globalTime: this.globalTime,
              start: dateFormat(new Date(current.valueOf() - 24 * 60 * 60 * 1000)),
              end: dateFormat(current)
            }
          });
          this.extra.count = count + 1
        },
        new Date().valueOf(),
        10 * 1000,
        true,
        () => this.stopLoop));

  }

  componentDidUpdate() {
    const {showAutoScore} = this.showFlag;
    const {autoScoreLoading} = this.props;


    if (!showAutoScore) {
      if (autoScoreLoading) {
        this.showFlag.showAutoScore = true;
      }
    }
  }

  componentWillUnmount() {
    cancelAnimationFrame(this.autoScoreReq);
    cancelAnimationFrame(this.onceReq);
    this.stopLoop = true
  }


  render() {
    const {showAutoScore} = this.showFlag;
    return (
      <div>
        <Row>
          <Col span={13}>
            <Card title="自动打分"
                  bordered={false}
                  loading={!showAutoScore}
            >
              <AutoScore/>
            </Card>
          </Col>

          <Col span={11} style={{paddingLeft: 8}}>
            <Common name="GaoluDiagnoseScore" useDatePicker={false} timeRange={15}/>
          </Col>
        </Row>

        <Row style={{marginTop: 17}}>
          <Card
            style={{width: '100%'}}
            bordered={false}

            className={styles.customCard}>

            <DatePicker
              showTime
              format="YYYY-MM-DD"
              placeholder="选择时间"
              key={Math.random()}
              defaultValue={moment(this.state.current, "YYYY-MM-DD")}
              onChange={this.timePick}
            />

            <Row>
              <Col span={12}>
                <Card
                  style={{width: '100%'}}
                  bordered={false}
                  title="指标失分"
                  className={styles.customCard}>
                  <LoseScore/>
                </Card>
              </Col>
              <Col span={12}>
                <Card
                  style={{width: '100%'}}
                  bordered={false}
                  title="指标失分值"
                  className={styles.customCard}>
                  <LoseItem/>
                </Card>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <Card
                  style={{width: '100%'}}
                  bordered={false}
                  title="项目占比">
                  <LoseItemRate/>
                </Card>
              </Col>
              <Col span={12}>
                <Card
                  style={{width: '100%'}}
                  bordered={false}
                  title="偏离频次">
                  <LoseCountDetail/>
                </Card>
              </Col>
            </Row>
            <Row>
              <CommonTable title="专家打分数据" name="ExpertScore" timeRange={30} scroll={{
                y: 310,
              }}/>
            </Row>
            {/*<CoreData hasParent globalTime={this.globalTime}/>*/}
          </Card>
        </Row>
      </div>
    );
  }
}

export default connect(({global, loading}) => ({
  autoScoreLoading: loading.effects["gaolu/autoScore"],
  global
}))
(Main);
